<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color:red;
        }
        .green {
            color: green;
        }
    </style>
</head>
<script src="https://unpkg.com/vue@next"></script>
<body>
    <div id="root"></div>    
</body>
<script>
    // 子组件一个标签
    // const app = Vue.createApp({
    //  data() {
    //      return {
    //         classString:'red',  // 字符串
    //         classObject: {      // 对象
    //             red: true
    //         },
    //         classArray: ['red','green']
    //      }
    //  },
    //  methods: {
         
    //  },
    //  template: `
    //    <div :class="classString">hello world</div>
    //    <div :class="classObject">hello world1</div>
    //    <div :class="classArray">hello world1
    //      <demo class='red'/> 
    //    </div>
       
    //  `
    // })

    // app.component('demo', {
    //     template: `
    //         <div > single</div>
    //     `
    // })
    // const vm = app.mount('#root')


    // 子组件两个标签
    const app = Vue.createApp({
     data() {
         return {
            classString:'red',  // 字符串
            classObject: {      // 对象
                red: true
            },
            classArray: ['red','green']
         }
     },
     methods: {
         
     },
     template: `
       <div :class="classString">hello world</div>
       <div :class="classObject">hello world1</div>
       <div :class="classArray">hello world1
         <demo class='red'/> 
       </div>
       
     `
    })

    app.component('demo', {
        template: `
            <div > single</div>
            <div :class="$attrs.class"> single</div>
        `
    })
    const vm = app.mount('#root')
 </script>
</html>


<!-- 
根组件作用于子组件  子组件直接使用 class=""  赋值属性

子组件一个标签  根组件赋值生效
子组件两个标签  根组件赋值无效

子组件使用 :class="$attrs.class" 传递父组件属性

 -->